<!-- 缴费信息 -->
<template>
  <view class="px-15 py-10 fz-14 bgf mt-15">
    <template v-if="info.auditStatus !== PayAuditStatusEnum.AUDITED">
      <view class="disFlxJS linh-35">
        <view class="title">{{ info.type === MemberOrderType.RENEW ? '原职务' : '申请职务' }}</view>
        <view>{{ info.levelName }}</view>
      </view>
      <view class="disFlxJS linh-35">
        <view class="title">
          {{ info.type === MemberOrderType.RENEW ? '本期职务' : '实际职务' }}
        </view>
        <view>{{ info.nowLevelName }}</view>
      </view>
      <view class="disFlxJS linh-35">
        <view class="title">会费标准</view>
        <view>{{ info.money }}元/{{ info.unit }}</view>
      </view>
      <view class="disFlxJS linh-35">
        <view class="title">待缴金额</view>
        <view>{{ info.payMoney }}元</view>
      </view>
      <view class="disFlxJS linh-35">
        <view class="title">本期缴费至</view>
        <view>{{ formatToDate(info.endTime) }}</view>
      </view>
      <view class="disFlxJS linh-35">
        <view class="title">
          {{ info.type === MemberOrderType.RENEW ? '续费函' : '缴费函' }}
        </view>
        <view class="btn" @click="download">查看</view>
      </view>
    </template>
    <template v-else>
      <view class="disFlxJS linh-35">
        <view class="title">当前职务</view>
        <view>{{ info.nowLevelName }}</view>
      </view>
      <view class="disFlxJS linh-35">
        <view class="title">会费标准</view>
        <view>{{ info.money }}元/{{ info.unit }}</view>
      </view>
      <view class="disFlxJS linh-35">
        <view class="title">有效期</view>
        <view>{{ formatToDate(info.endTime) }}</view>
      </view>
      <view class="disFlxJS linh-35">
        <view class="title">会籍状态</view>
        <view>正常</view>
      </view>
    </template>
  </view>
</template>

<script lang="ts" setup>
  import { propTypes } from '@/utils/propTypes';
  import { useEnv } from '@/hooks/core/useEnv';
  import { useUpload } from '@/hooks/core/useUpload';
  import { Api as membershipApi } from '@/api/membership';
  import { PayAuditStatusEnum, MemberOrderType } from '@/enums/membershipEnum';
  import { formatToDate } from '@/utils/dateUtil';

  const props = defineProps({
    info: propTypes.object.def({}),
  });

  // 下载缴费函
  const { getEnv } = useEnv();
  const { openDocument } = useUpload();
  const download = () => {
    openDocument({
      filePath: getEnv('BASE_URL') + membershipApi.paymentExport + `/${props.info.id}`,
      fileType: 'pdf',
      customFileName: `${props.info.memberName}-${
        props.info.type === MemberOrderType.RENEW ? '续费缴费函' : '入会缴费函'
      }`,
    });
  };
</script>
<style lang="scss" scoped>
  .title {
    color: #808080;
  }
  .btn {
    background-color: #e9e3b5;
    color: #000;
    width: 140rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    font-size: 28rpx;
    border-radius: 8rpx;
    box-sizing: border-box;
  }
</style>
